<template>
  <div>
    <div style="font-weight: 800;font-size: 30px;">
      确认订单信息
    </div>
    请在30分钟内完成支付！超出可能导致购买失败，需重新下单
    <Panel style="padding: 0 30px;">
      <div style="font-weight: 600;font-size: 24px;">购买商品</div>
      <el-card>
        <div style="display: flex; flex-direction: row; ">
          <img :src="preorder.course.course_img" class="course_image">
          <div style="display: flex; flex-direction: column; margin-left: 40px;">
            <div style="font-weight: 600;font-size: 20px;">{{preorder.course.name}}</div>
            <div style="font-size: 16px;">{{preorder.msg}}</div>
            <div class="origin_price">原价 {{preorder.origin_price}}</div>
          </div>
        </div>
        <el-divider></el-divider>
        <div v-if="needInvite" style="display: flex; flex-direction: row; align-items: center;">
          <div style="font-size: 18px; margin-right: 20px;">邀请码</div>
          <el-input v-model="invite_code" style="width:120px; margin-right: 20px;" :disabled="can_invite"></el-input>
          <el-button :disabled="can_invite" type="success" @click="set_invite">使用</el-button>
        </div>
        

        <div style="display: flex; flex-direction: row; align-items: center; margin-top: 10px;">
          <div style="font-size: 18px; margin-right: 20px;">奖学金</div>
          <el-input oninput="this.value = this.value.replace(/[^\d]/g,'');" v-model="scholarship" style="width:120px; margin-right: 20px;" ></el-input>
          <el-button type="success" @click="set_scholarship">使用</el-button>
          <div style="font-size: 18px; margin-left: 20px;">  
            可用 {{this.user.scholarship - (this.scholarship > 0 ? this.scholarship : 0) }}
          </div>
        </div>

        <el-button v-if="!have_coupon" type="text" style="font-size:20px" @click="change_coupon"> 使用优惠券</el-button>
        
        <div v-if="have_coupon" style="display: flex; flex-direction: row; align-items: center; margin-top: 10px;">
          <div style="font-size: 18px; margin-right: 20px;">优惠券</div>
          <el-input v-model="coupon_code" style="width:120px; margin-right: 20px;" :disabled="can_coupon"></el-input>
          <el-button :disabled="can_coupon" type="success" @click="set_coupon">使用</el-button>
        </div>

        <div style="color: brown; font-size: 16px;display: flex; flex-direction: column; align-items:flex-end">
          <div v-if="preorder.use_coupon"> 已使用 {{preorder.use_coupon}} 券 </div>
          <div v-if="can_coupon"> 优惠券优惠 {{dec_coupon}} 元 </div>
          <div v-if="can_invite"> 邀请码优惠 {{dec_invite}} 元 </div>
        </div>

      </el-card>

      <el-card style="margin: 30px 0;"> 
        <div style="font-weight: 800;font-size: 20px;">支付方式</div>
        <div style="display: flex; flex-direction: column; margin-top: 20px; font-size: 16px;">
          <el-radio-group v-model="pay_type" >
            <el-radio label="alipay">
              <img style="height:40px; margin-right: 10px;" src="https://code-art.oss-cn-guangzhou.aliyuncs.com/alipay.svg"></img>
                支付宝
            </el-radio>
            <el-radio label="wxpay">
              <img style="height:40px; margin-right: 10px;" src="https://code-art.oss-cn-guangzhou.aliyuncs.com/wechat.svg"></img>
                微信
            </el-radio>
          </el-radio-group>
        </div>

        <div style="color: brown; font-size: 16px;display: flex; flex-direction: column; align-items:flex-end">
          <div style="color: red; font-weight: 600; font-size: 20px;margin: 10px 0; ">实付金额: {{preorder.price}}</div>
          <el-button type="primary" round @click="makeorder" style="font-size: 20px; font-weight: 600;" >立即支付 </el-button>
        </div>
      </el-card>
    </Panel>

  </div>
</template>
  
<script>
  import api from '@oj/api'
  import { mapGetters } from 'vuex'
  // import utils from '@/utils/utils'
  import { USER_TYPE } from '@/utils/constants'

  export default {
    name: 'PreOrder',
    data () {
      return {
        query: {},
        preorder: {},
        ok: false,
        course: {},
        invite_code: '',
        coupon_code: '',
        have_coupon: false,
        can_coupon: false,
        can_invite: false,
        dec_coupon: 0,
        dec_invite: 0,
        pay_type: 'alipay',
        scholarship: null,
        ispaying: false
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      init () {
        this.query.goodsId = this.$route.query.goodsId
        this.query.type = this.$route.query.type
        console.log(this.query)
        this.makePreOrder()
      },
      makePreOrder () {
        api['makePreOrder'](this.query).then((res) => {
          this.preorder = res.data.data.preorder
          this.ok = res.data.data.ok
          this.use_coupon = res.data.data.use_coupon
          console.log(this.preorder)
          console.log(this.ok)
          console.log(res.data.data)
        }).catch()
      },
      change_coupon () {
        this.have_coupon = true
      },
      set_scholarship () {
        if (this.scholarship > this.user.scholarship) {
          this.$message.error('奖学金不足！')
          return
        }
        this.query.scholarship = this.scholarship
        api['makePreOrder'](this.query).then((res) => {
          this.ok = res.data.data.ok
          console.log(res.data.data)
          if (this.ok && !this.can_coupon) {
            let nw = res.data.data.preorder
            if (nw.scholarship) {
              this.dec = nw.scholarship
              this.$message.success('成功优惠 ' + this.dec.toString() + ' 元')
              this.preorder.price = nw.price.toFixed(2)
            }
          } else {
            this.$message.error(res.data.data.message)
          }
        }).catch()
      },
      set_coupon () {
        this.query.coupon_code = this.coupon_code
        api['makePreOrder'](this.query).then((res) => {
          this.ok = res.data.data.ok
          console.log(res.data.data)
          if (this.ok && !this.can_coupon) {
            let nw = res.data.data.preorder
            if (nw.coupon_code) {
              this.can_coupon = true
              this.dec_coupon = (this.preorder.price - nw.price).toFixed(2)
              this.$message.success('成功优惠 ' + this.dec_coupon.toString() + ' 元')
              this.preorder.price = nw.price.toFixed(2)
            }
          } else {
            this.$message.error(res.data.data.message)
          }
        }).catch()
      },
      set_invite () {
        this.query.invite_code = this.invite_code
        api['makePreOrder'](this.query).then((res) => {
          this.ok = res.data.data.ok
          console.log('set_invite', res.data.data)
          if (this.ok) {
            let nw = res.data.data.preorder
            if (nw.invite_code && !this.can_invite) {
              this.can_invite = true
              this.dec_invite = (this.preorder.price - nw.price).toFixed(2)
              this.$message.success('成功优惠 ' + this.dec_invite.toString() + ' 元')
              this.preorder.price = nw.price
            }
          } else {
            this.$message.error(res.data.data.message)
          }
        }).catch()
      },
      makeorder () {
        api['makeOrder'](this.query).then((res) => {
          // console.log('qqqqqqqqqqqqqqqqq', res.data)
          if (res.data.data.free) {
            this.$message.success('购买成功')
            this.$router.push({name: 'course-detail', params: {course_id: this.preorder.course.id}})
          } else
          if (this.ok) {
            let orderNumber = res.data.data.order_number
            console.log(orderNumber)
            if (this.pay_type === 'wxpay') {
              api['wxpay'](orderNumber).then((res) => {
                var url = res.data.data.url
                const {href} = this.$router.resolve({
                  name: 'wxpay',
                  query: {url: url, order_number: orderNumber}
                })
                window.open(href, '_blank')

                this.ispaying = true
                this.$alert('订单已经支付完毕', '确认订单', {
                  confirmButtonText: '确定',
                  callback: action => {
                    api['checkWxpayOrder'](orderNumber).then((res) => {
                      if (res.data.data.ok) {
                        this.$message.success('支付成功')
                        this.$router.push({name: 'course-detail', params: {course_id: this.preorder.course.id}})
                      } else {
                        this.$message.error('支付失败，请重新下单支付！')
                      }
                    })
                  }
                })
              })
            } else {
              api['alipay'](orderNumber).then((res) => {
                var url = res.data.data.url
                window.open(url)
                this.ispaying = true
                this.$alert('订单已经支付完毕', '确认订单', {
                  confirmButtonText: '确定',
                  callback: action => {
                    api['checkAlipayOrder'](orderNumber).then((res) => {
                      if (res.data.data.ok) {
                        this.$message.success('支付成功')
                        this.$router.push({name: 'course-detail', params: {course_id: this.preorder.course.id}})
                      } else {
                        this.$message.error('支付失败，请重新下单支付！')
                      }
                    })
                  }
                })
              })
            }
          } else {
            this.$message.error(res.data.data.message)
          }
        }).catch()
      }
    },
    computed: {
      ...mapGetters(['user', 'theme']),
      isAdmin () {
        return this.user.admin_type === USER_TYPE.SUPER_ADMIN
      },
      needInvite () {
        console.log('ccccc', this.user)
        return this.user.invite_person_code === ''
      }
    }
  }
</script>
  
  
  
<style lang="less">
  .course_image {
    width: 200px;
  }

  .origin_price {
    font-size: 20px; 
    font-weight: 600;
    margin-top: 30px;
    color: tomato;
  }

  .el-radio__label{
    font-size: 24px;
    margin-left:10px;
    display: flex;
    align-items: center;
  }

  .el-radio{
    display: flex;
    align-items: center;
    margin:10px 0;
  }
  
</style>
